<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片动画</title>
</head>
<style>
	body{
		margin: 0;
		background-color: #000;
	}
	#box{
		width:570px;
		height:600px;
		margin: 0px auto;
		margin-top:100px;
	}
	#wrap{
		width:100%;
		height:100%;
		position:relative;
	}
	#wrap img{position:absolute;left:0;top:0;z-index:1;display:none;max-width:100%;max-height:100%;}
	#wrap img.active{display:block;}

 </style>
<body>
	<div id="box">
		<div id="wrap"></div>
	</div>
	<script>
		
		go("wrap","豪宅_000","74");

		function go(className,imgSrc,num){//className:容器Id名字，imgSrc:图片名称前缀，num:图片数量
			var zIndex = 0,
			    str="",
			    oWrap=document.getElementById(className),
			    imgList = oWrap.getElementsByTagName("img");

			for(var i=0;i<=num;i++){
				if(i<10){
					i="0"+i
				}
				str +='<img src="images/'+ imgSrc + i +'.png">';
			}
			oWrap.innerHTML = str;
			timer = setInterval(function(){
				for(var i=0;i<=num;i++){
					imgList[i].setAttribute("class","")
				}
				zIndex++;
				if(zIndex == (num-0+1)){
					zIndex = 0
				}
				imgList[zIndex].setAttribute("class","active")
			},80);
		}

	</script>
</body>
</html>